<script>
import { isString, isToday } from "@/views/webchat/utils/validate";
import { timeFormat } from "@/views/webchat/utils";
export default {
  name: "LemonContact",
  components: {},
  data() {
    return {};
  },
  props: {
    contact: Object,
    simple: Boolean,
    timeFormat: {
      type: Function,
      default(val) {
        return timeFormat(val, isToday(val) ? "h:i" : "y/m/d");
      }
    }
  },
  render() {
    const { contact } = this;
    return (
      <div
        class={["lemon-contact", { "lemon-contact--name-center": this.simple }]}
        on-click={e => this._handleClick(e, contact)}
      >
        <lemon-badge
          count={!this.simple ? contact.unread : 0}
          class="lemon-contact__avatar"
          native-on-click={e => this._handleBubbleClick(e, contact)}
        >
          <lemon-avatar
            size={40}
            native-on-click={e => this._handleAvatarClick(e, contact)}
            src={contact.avatar}
          />
        </lemon-badge>
        <div class="lemon-contact__inner">
          <p class="lemon-contact__label">
            <span class="lemon-contact__name">{contact.displayName}</span>
            {!this.simple && (
              <span class="lemon-contact__time">
                {this.timeFormat(contact.lastSendTime)}
              </span>
            )}
          </p>
          {!this.simple && (
            <p class="lemon-contact__content">
              {isString(contact.lastContent) ? (
                <span domProps={{ innerHTML: contact.lastContent }} />
              ) : (
                contact.lastContent
              )}
            </p>
          )}
        </div>
      </div>
    );
  },
  created() {},
  mounted() {},
  computed: {},
  watch: {},
  methods: {
    _handleClick(e, data) {
      this.$emit("click", data);
    },
    _handleAvatarClick(e, data) {
      e.stopPropagation();
      this.$emit("avatar-click", data);
    },
    _handleBubbleClick(e, data) {
      e.stopPropagation();
      this.$emit("bubble-click", data);
    }
  }
};
</script>
<style lang="scss">
</style>
